import React, { useState } from 'react';
import {
  View,
  Image,
  StyleSheet,
  Modal,
  TouchableOpacity,
  Text,
  ActivityIndicator,
  Dimensions,
  ScrollView,
  Platform
} from 'react-native';
import theme from '../../styles/theme';

interface ImageViewerProps {
  visible: boolean;
  imageUrl: string;
  onClose: () => void;
}

export const ImageViewer: React.FC<ImageViewerProps> = ({
  visible,
  imageUrl,
  onClose
}) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(false);
  const windowWidth = Dimensions.get('window').width;
  const windowHeight = Dimensions.get('window').height;

  const handleLoad = () => {
    setLoading(false);
    setError(false);
  };

  const handleError = () => {
    setLoading(false);
    setError(true);
  };

  return (
    <Modal
      visible={visible}
      transparent={true}
      animationType="fade"
      onRequestClose={onClose}
    >
      <View style={styles.container}>
        <View style={styles.header}>
          <TouchableOpacity style={styles.closeButton} onPress={onClose}>
            <Text style={styles.closeButtonText}>关闭</Text>
          </TouchableOpacity>

          {Platform.OS === 'web' && (
            <TouchableOpacity
              style={styles.downloadButton}
              onPress={() => {
                // 在Web平台下载图片
                const link = document.createElement('a');
                link.href = imageUrl;
                link.download = imageUrl.split('/').pop() || 'image';
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
              }}
            >
              <Text style={styles.downloadButtonText}>下载</Text>
            </TouchableOpacity>
          )}
        </View>

        <ScrollView
          style={styles.scrollView}
          contentContainerStyle={styles.scrollContent}
          maximumZoomScale={3}
          minimumZoomScale={1}
          showsHorizontalScrollIndicator={false}
          showsVerticalScrollIndicator={false}
          centerContent
        >
          {loading && (
            <View style={[styles.loadingContainer, { width: windowWidth, height: windowHeight * 0.8 }]}>
              <ActivityIndicator size="large" color={theme.colors.primary.main} />
            </View>
          )}

          {error && (
            <View style={[styles.errorContainer, { width: windowWidth, height: windowHeight * 0.8 }]}>
              <Text style={styles.errorText}>图片加载失败</Text>
              <TouchableOpacity
                style={styles.retryButton}
                onPress={() => {
                  setLoading(true);
                  setError(false);
                }}
              >
                <Text style={styles.retryButtonText}>重试</Text>
              </TouchableOpacity>
            </View>
          )}

          <Image
            source={{ uri: imageUrl }}
            style={[
              styles.image,
              {
                width: windowWidth,
                height: windowHeight * 0.8,
                display: (loading || error) ? 'none' : 'flex'
              }
            ]}
            resizeMode="contain"
            onLoad={handleLoad}
            onError={handleError}
          />
        </ScrollView>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.9)',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: theme.spacing.md,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  closeButton: {
    padding: theme.spacing.sm,
  },
  closeButtonText: {
    color: theme.colors.common.white,
    fontSize: theme.typography.fontSize.md,
    fontWeight: theme.typography.fontWeight.medium,
  },
  downloadButton: {
    padding: theme.spacing.sm,
  },
  downloadButtonText: {
    color: theme.colors.primary.light,
    fontSize: theme.typography.fontSize.md,
    fontWeight: theme.typography.fontWeight.medium,
  },
  scrollView: {
    flex: 1,
  },
  scrollContent: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    backgroundColor: 'transparent',
  },
  loadingContainer: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  errorContainer: {
    justifyContent: 'center',
    alignItems: 'center',
  },
  errorText: {
    color: theme.colors.common.white,
    fontSize: theme.typography.fontSize.lg,
    marginBottom: theme.spacing.md,
  },
  retryButton: {
    backgroundColor: theme.colors.primary.main,
    paddingHorizontal: theme.spacing.md,
    paddingVertical: theme.spacing.sm,
    borderRadius: theme.borderRadius.md,
  },
  retryButtonText: {
    color: theme.colors.common.white,
    fontSize: theme.typography.fontSize.md,
    fontWeight: theme.typography.fontWeight.medium,
  }
});